<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增属性选择器</title>
    <style>
        /* 1.必须是input，但是含有value这个属性 */
        /* input[value] {
            color: pink;
        } */
        /* 2 */
        input[type=text] {
            color: pink;
        }

        /* 3 */
        div[class^=icon] {
            background-color: aqua;
        }

        /* 4. */
        section[class$=data] {
            background-color: pink;
        }

        /* ^开始,$结束,*任意 */
        /* 属性选择器的权重是10  类，属性，伪类选择器都是10 标签为1*/
    </style>
</head>

<body>
    <!-- 1.利用属性选择器可以不用借助类或者id选择器 -->
    <!-- <input type="text" value="请输入用户名..." id="">
    <input type="text"> -->
    <!-- 2.可以选择属性=值的某些元素 (重点)-->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!--3.属性选择器可以选择属性值开头相同的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>woshidajiangyou</div>
    <!-- 4. 属性选择器可以选择属性值结尾相同的某些元素-->
    <section class="icon1-data">我是按起来</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">我是谁</section>

</body>

</html>